import { createVNode, render } from 'vue';
import Toast from '';

// 存储提示框DOM容器
const container = document.createElement('div');
document.body.appendChild(container);

// 生成唯一ID
let toastId = 0;

export default {
  install(app) {
    // 注册全局指令 v-toast
    app.directive('toast', {
      // 指令绑定到元素时触发
      mounted(el, binding) {
        // 给元素添加点击事件（也可改为其他触发方式，如自动触发）
        el.addEventListener('click', () => {
          showToast(binding.value);
        });
      },
      // 指令参数更新时触发
      updated(el, binding) {
        if (binding.oldValue !== binding.value) {
          // 可根据需求处理参数更新逻辑
        }
      }
    });

    // 同时提供全局方法（可选，方便非指令调用）
    app.config.globalProperties.$toast = showToast;
  }
};

// 显示提示框的核心函数
function showToast(options) {
  // 支持字符串直接传参（如 v-toast="'关注成功'"）
  if (typeof options === 'string') {
    options = { message: options };
  }

  // 创建唯一ID，避免重复
  const id = `toast-${toastId++}`;
  // 创建虚拟节点
  const vnode = createVNode(Toast, {
    ...options,
    onClose: () => {
      // 移除虚拟节点
      render(null, container);
    }
  });
  // 设置节点ID
  vnode.el = document.createElement('div');
  vnode.el.id = id;
  // 渲染到容器
  render(vnode, container);
}